<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page language="java" import="com.server.web.JsVersionUtil"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="renderer" content="webkit">
		<title>添加角色</title>
		<link rel="stylesheet" href='<c:url value="/share/pintuer.css"></c:url>'>
		<link rel="stylesheet" href='<c:url value="/share/admin.css"></c:url>' >
		<script type="text/javascript" src='<c:url value="/js/jquery.js"></c:url>' ></script>
		<script type="text/javascript" src='<c:url value="/js/pintuer.js"></c:url>'></script>
		<script type="text/javascript" src='<c:url value="/js/admin.js"></c:url>'></script>
		<script type="text/javascript" src='<c:url value="/js/layer.js"></c:url>'></script>
	</head>

	<body>
			<form class="form-x">
			<div class="form-group">
				<div class="label"><label for="name">角色名</label></div>
				<div class="field">
					<input type="text" class="input input-small" id="name" name="name" size="30" data-validate="required:请填写角色名"/>
				</div>
			</div>
			<div class="form-group">
				<div class="label"><label for="describe">角色描述</label></div>
				<div class="field">
					<input type="text" class="input input-small" id="describe" name="describe" size="30" data-validate="required:请填写角色描述"/>
				</div>
			</div>
			<div class="form-group">
				<div class="label"><label for="authority">功能表</label></div>
				<div class="field">
					<table class="table table-hover">
	        	<c:forEach items="${menuList}" var="m">
	        	<tr>
		        	<th style="border-left:0px;border:1px solid #ddd;" ><!--<input class="parent" type="checkbox"  name="menu_ids" value="${m.id}"/>-->${m.name}</th>
		        	<td style="border-left:0px;border:1px solid #ddd;">
		        	<c:forEach items="${m.menu_sub}" var="sub_m">
	
							<input type="checkbox"  name="menu_ids" value="${sub_m.id}"/>
							${sub_m.name}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							
					</c:forEach>
					</td>
	        	</tr>
	        	</c:forEach>
	        </table>
				</div>
			</div>
			
			<div class="form-button">
			<button class="button border-green" id="add" type="button">添加</button>
			</div>
			</form>
		<!--底部-->
		<script>
		   function check_from(){
			   var chk_value =[]; 
			   $('input[name="menu_ids"]:checked').each(function(){ 
			   		chk_value.push($(this).val()); 
			   });
			   if($("input[name=name]").val()=="" || $("input[name=name]").val()==null){
				   $("input[name=name]").parent().append('<div class="input-help"><ul><li><font color="red">请填写角色名</font></li></ul></div>');
				   return false;
			   }
			   if($("input[name=describe]").val()=="" || $("input[name=describe]").val()==null){
				   $("input[name=describe]").parent().append('<div class="input-help"><ul><li><font color="red">请填写角色描述</font></li></ul></div>');
				   return false;
			   }
			   if(chk_value && chk_value.length>0){
				   return true;
			   }
			   
			   return false;
		    }
			$(function() {
				
				//大于移动端800宽度才弹出提示
				if ($(window).width() >= 800) {
					layer.open({
						type: 1,
						shade: false,
						title: false, //不显示标题
						area: ['420px', '640px'],
						content: $('#alert-talk'), //捕获的元素
						cancel: function(index) {
							layer.close(index);
						}
					});
				}
				$(".parent").click(function(){
					if($(this).attr("checked")=="checked"){
						$(this).parent().next("td").children("input").removeAttr("checked");
						$(this).removeAttr("checked");
					}else{
						$(this).parent().next("td").children("input").prop("checked",true);
						$(this).attr("checked","checked");
					}
				});
				$("#add").click(function(){
					if(check_from()){
						var chk_value =[]; 
						   $('input[name="menu_ids"]:checked').each(function(){ 
						   		chk_value.push($(this).val()); 
						   }); 
						var authority = chk_value.join(",");
						 $.ajax({
							url:      "<c:url value='/adminRole/addRole'></c:url>",
							type:     "post",
							dataType: "json",
							data:     {
								"name":$("input[name=name]").val(),
								"describe":$("input[name=describe]").val(),
								"authority":authority
							},
							success: function(json){
								if(json.isSuccess){
									alert(json.info);
									location.href="<c:url value='/adminRole'></c:url>";
								}else{
									alert(json.info);
								}
							}
						}); 
					}
				});
			});
		</script>
	</body>

</html>